<template>
    <view>
        <status-bar :title="title"></status-bar>
        <view class="rows p-re">
            <!-- <mp-html :content="ordInfo.order_content" lazy-load scroll-table selectable use-anchor show-with-animation /> -->
            <u-parse :content="ordInfo.order_content" :domain="$imgUrl" :previewImg="false" :lazyLoad="true"></u-parse>

            <!-- 头部 -->
            <view class="head d-flex a-center p-left30 p-re">
                <image :src="shareData.imageUrl" mode="aspectFit"></image>
                <view class="right p-left24 d-flex f-column j-sb">
                    <view class="color_33 size32">{{ shareData.title }}</view>
                    <view class="label white text-center bold">企业认证</view>
                </view>
                <view class="back p-ab size32" @click="backHome()">返回店铺</view>
            </view>
        </view>

        <!-- 底部 -->
        <view class="subMit d-flex">
            <view class="left flexac white size36" @click="showFrom = true">{{ ordInfo.order_title }}</view>
            <view class="right flexac bgwhite size36" @click="handleCall">立即咨询</view>
        </view>
        <view class="text-center p-bot50">
            <view class="back size32 m-top50 m-bot50" @click="backHome()">返回店铺</view>
            <view class="support">慕格提供技术支持</view>
        </view>

        <u-popup :show="showFrom" round="10" closeable @close="showFrom = false">
            <view class="viewbox auto contact">
                <view class="row j-centert size42 bold p-top50">{{ ordInfo.order_name }}</view>
                <fromlist :order_id="order_id" @submit="showFrom = false" :v_id="v_id" :VeriCode="VeriCode" @cancelUp="showFrom = false"></fromlist>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import fromlist from '../components/from/fromlist.vue';
    export default {
        components: {
            fromlist
        },
        data() {
            return {
                title: '',
                showFrom: false,
                order_id: 2555,
                v_id: '100721363',
                VeriCode: 'I6bEsa714aSTTwSXHNxR6w==',
                config: [],
                ordInfo: '',
                shareData: uni.getStorageSync('shareData')
            };
        },
        onLoad() {
            this.customForm();
        },
        methods: {
            customForm() {
                this.$http
                    .post({
                        url: '/SRA_CustomerForm/customForm',
                        data: {
                            ordId: this.order_id,
                            v_id: this.v_id,
                            VeriCode: this.VeriCode,
                            source_bid: uni.getStorageSync('bid'),
                            source_v_id: uni.getStorageSync('vid'),
                            source_open_id: uni.getStorageSync('openid')
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.data);
                        const { config, ordInfo } = res.data;
                        this.config = config;
                        this.ordInfo = ordInfo;
                        this.title = ordInfo.order_name;

                        this.ordInfo.order_content = this.$common.richTxt(this.ordInfo.order_content).html;
                    });
            },
            handleCall() {
                uni.makePhoneCall({
                    phoneNumber: this.ordInfo.order_tel
                });
            }
        }
    };
</script>
<style>
    page {
        padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    }
</style>
<style lang="scss" scoped>
    .subMit {
        view {
            width: 300rpx;
            height: 100rpx;
            border-radius: 10rpx;
            margin: auto;
        }
        .left {
            background: #155bd4;
        }
        .right {
            color: #606266;
            border: 1rpx solid #c0c4cc;
        }
    }
    .contact {
        max-height: 1000rpx;
        overflow-y: scroll;
        padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    }
    .head {
        width: 718rpx;
        height: 174rpx;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 10rpx;
        position: absolute;
        left: 50%;
        margin-left: -359rpx;
        top: 40rpx;
        image {
            width: 100rpx;
            height: 100rpx;
        }
        .right {
            height: 100rpx;
        }
        .label {
            width: 112rpx;
            line-height: 34rpx;
            background: #dd0f10;
        }
        .back {
            line-height: 174rpx;
            top: 0;
            right: 30rpx;
        }
    }
    .back {
        color: #155bd4;
    }
    .support {
        color: #bfbec3;
        font-size: 24rpx;
    }
</style>
